<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人简历-张问先</title>
    <link rel="stylesheet" href="./index.css">
  </head>
  <body>
    <div class="personal-resume">
      <div class="header-bg">
        <span>个人简历</span>
        <svg class="download" onclick="download()" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
          <path class="download-path" d="M987.100279 949.557581H36.947349a36.923535 36.923535 0 1 0 0 73.870884H987.112186a36.935442 36.935442 0 0 0-0.011907-73.870884z m-502.772093-78.943255a37.864186 37.864186 0 0 0 26.933581 11.275907c10.537674 0 20.015628-4.310326 26.838326-11.311628l458.882977-458.882977c6.906047-6.858419 11.240186-16.348279 11.275907-26.814512a37.923721 37.923721 0 0 0-37.864186-37.828465 37.483163 37.483163 0 0 0-26.778791 11.121116L549.090233 752.675721V38.507163c-0.047628-0.035721-0.047628-0.035721-0.047628-0.071442a37.780837 37.780837 0 0 0-37.757024-37.864186 37.840372 37.840372 0 0 0-37.828465 37.864186s0 0.035721 0.035721 0.071442V752.64L79.002791 358.149953a37.888 37.888 0 0 0-64.678698 26.671628c0 10.501953 4.298419 20.075163 11.192558 26.850233l458.811535 458.942512z m0 0"></path>
        </svg>
      </div>
      <div class="info-card">
        <div class="info-card-title">基本信息</div>
        <div class="info-card-content">
          <div class="base-info-wrap">
            <div class="base-info-item">
              <div class="base-info-item-label">姓名</div>
              <div class="base-info-item-content">张问先</div>
            </div>
            <div class="base-info-item">
              <div class="base-info-item-label">性别</div>
              <div class="base-info-item-content">男</div>
            </div>
            <div class="base-info-item">
              <div class="base-info-item-label">年龄</div>
              <div class="base-info-item-content">29</div>
            </div>
            <div class="base-info-item">
              <div class="base-info-item-label">民族</div>
              <div class="base-info-item-content">仡佬族</div>
            </div>
            <div class="base-info-item">
              <div class="base-info-item-label">籍贯</div>
              <div class="base-info-item-content">贵州省遵义市</div>
            </div>
            <div class="base-info-item">
              <div class="base-info-item-label">手机</div>
              <div class="base-info-item-content">18785272941</div>
            </div>
            <div class="base-info-item">
              <div class="base-info-item-label">学历</div>
              <div class="base-info-item-content">本科</div>
            </div>
            <div class="base-info-item">
              <div class="base-info-item-label">时间</div>
              <div class="base-info-item-content">2012/09 至 2016/07</div>
            </div>
            <div class="base-info-item">
              <div class="base-info-item-label">院校</div>
              <div class="base-info-item-content">沈阳航空航天大学</div>
            </div>
            <div class="base-info-item">
              <div class="base-info-item-label">专业</div>
              <div class="base-info-item-content">计算机科学与技术</div>
            </div>
            <div class="base-info-item base-info-skill">
              <div class="base-info-item-label">技能特长</div>
              <div class="base-info-item-content">
                <ul class="base-info-skill-list">
                  <li class="base-info-skill-item">熟悉前端HTML、CSS、JavaScript基础技术</li>
                  <li class="base-info-skill-item">精通Vue框架，熟悉React、Angular等前端框架</li>
                  <li class="base-info-skill-item">精通前端工程化技术(Webpack/Rollup/Vite等等)</li>
                  <li class="base-info-skill-item">熟悉前端可视化技术(ECharts/G2/G6/D3等等)</li>
                  <li class="base-info-skill-item">熟悉各种开发工具(VSCode/Git等等)</li>
                  <li class="base-info-skill-item">熟悉Nodejs、TypeScript、Rust语言</li>
                  <li class="base-info-skill-item">能够设计并研发企业级组件库和微前端框架</li>
                  <li class="base-info-skill-item">有一年的管理经验，能够带着中高级前端研发企业级前端框架</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="info-card">
        <div class="info-card-title">求职意向</div>
        <div class="info-card-content">
          <div class="job-objective">
            <div class="job-objective-item">
              <div class="job-objective-item-label">城市</div>
              <div class="job-objective-item-content">成都</div>
            </div>
            <div class="job-objective-item">
              <div class="job-objective-item-label">薪资</div>
              <div class="job-objective-item-content">22k+</div>
            </div>
            <div class="job-objective-item">
              <div class="job-objective-item-label">职位</div>
              <div class="job-objective-item-content">资深前端工程师或者Tech Leader</div>
            </div>
            <div class="job-objective-item">
              <div class="job-objective-item-label">其他</div>
              <div class="job-objective-item-content">比较期望从事前端组件库、前端框架的设计开发及前端leader，也可以接受产品研发，不限行业</div>
            </div>
          </div>
        </div>
      </div>
      <div class="info-card">
        <div class="info-card-title">工作经历</div>
        <div class="info-card-content">
          <div class="work-history">
            <div class="work-history-item">
              <div class="work-history-item-label">公司</div>
              <div class="work-history-item-content">上海安硕信息技术股份有限公司</div>
            </div>
            <div class="work-history-item">
              <div class="work-history-item-label">时间</div>
              <div class="work-history-item-content">2016/03 - 2022/07</div>
            </div>
            <div class="work-history-item">
              <div class="work-history-item-label">职位</div>
              <div class="work-history-item-content">资深前端工程师</div>
            </div>
            <div class="work-history-item">
              <div class="work-history-item-label">参与项目</div>
              <div class="work-history-item-content">产品(10+)/交付(10+)</div>
            </div>
            <div class="work-history-item work-history-duty">
              <div class="work-history-item-label">岗位职责</div>
              <div class="work-history-item-content">
                <ul class="work-history-duty-list">
                  <li class="work-history-duty-item">开发web前端页面</li>
                  <li class="work-history-duty-item">实现数据可视化功能</li>
                  <li class="work-history-duty-item">负责项目前端技术选型及架构的设计和实现</li>
                  <li class="work-history-duty-item">设计并开发企业级组件库</li>
                  <li class="work-history-duty-item">设计并开发微前端框架</li>
                  <li class="work-history-duty-item">管理并培养前端开发人员</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="info-card-content">
          <div class="work-history">
            <div class="work-history-item">
              <div class="work-history-item-label">公司</div>
              <div class="work-history-item-content">上海直真君智科技有限公司</div>
            </div>
            <div class="work-history-item">
              <div class="work-history-item-label">时间</div>
              <div class="work-history-item-content">2022/08 - 2022/09</div>
            </div>
            <div class="work-history-item">
              <div class="work-history-item-label">职位</div>
              <div class="work-history-item-content">高级前端工程师</div>
            </div>
            <div class="work-history-item">
              <div class="work-history-item-label">参与项目</div>
              <div class="work-history-item-content">两个项目</div>
            </div>
            <div class="work-history-item work-history-duty">
              <div class="work-history-item-label">岗位职责</div>
              <div class="work-history-item-content">
                <ul class="work-history-duty-list">
                  <li class="work-history-duty-item">完善系统功能，修复测试缺陷，实现新需求</li>
                  <li class="work-history-duty-item">搭建元件库构建开发环境，实现元件拆分</li>
                  <li class="work-history-duty-item">探索低代码技术，为低代码平台提供技术指导</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="info-card">
        <div class="info-card-title">项目经验</div>
        <div class="info-card-content">
          <div class="project-experience-tooltip">备注：实际参与项目20+，这里只展示几个比较重要的项目</div>
          <div class="project-experience-list">
            <div class="project-experience-item">
              <div class="project-experience-item-name">
                <div class="project-experience-item-label">项目名称</div>
                <div class="project-experience-item-content">数据管控平台(DMP)</div>
              </div>
              <div class="project-experience-item-desc">
                <div class="project-experience-item-label">项目描述</div>
                <div class="project-experience-item-content">主要用于数据的加工处理，包含数据采集，作业调度，运行监控等功能。实现从各个系统抽取数据，经过数据清洗转换，然后写入目标系统。每个处理任务为一个作业单元，用户可以自由创建作业任务单元，实现对数据的加工处理，同时还实现了对系统状态和任务状态的可视化监控</div>
              </div>
              <div class="project-experience-item-tasks">
                <div class="project-experience-item-label">工作内容</div>
                <div class="project-experience-item-content">
                  <ul class="project-experience-content-list">
                    <li class="project-experience-content-item">开发系统前端页面，如作业列表界面、新增作业、作业详情等界面</li>
                    <li class="project-experience-content-item">根据作业依赖信息，编写算法计算出作业节点的坐标位置，实现跑批任务可视化，同时展示数据处理进度及状态，后端算法使用Java实现，前端可视化使用Reaphel.js实现</li>
                    <li class="project-experience-content-item">使用ECharts实现任务状态和系统状态的可视化</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="project-experience-item">
              <div class="project-experience-item-name">
                <div class="project-experience-item-label">项目名称</div>
                <div class="project-experience-item-content">数据资产管控平台(DKC)</div>
              </div>
              <div class="project-experience-item-desc">
                <div class="project-experience-item-label">项目描述</div>
                <div class="project-experience-item-content">系统主要用于数据资产的管理，包含有数据标准、数据加工、数据质量、运营加工四大功能模块，同时使用知识库来贯通数据资产管理的四大模块，用户可以根据特定的业务场景来建立知识库，知识库包含了数据来源、加工处理方法、数据质量判别方法和最终的数据运营服务接口，用户创建的知识库还可以通过权限管理开放给别人使用，实现数据资产管控方法的积累</div>
              </div>
              <div class="project-experience-item-tasks">
                <div class="project-experience-item-label">工作内容</div>
                <div class="project-experience-item-content">
                  <ul class="project-experience-content-list">
                    <li class="project-experience-content-item">前端框架设计与实现，选择jsp + iframe + vue.js + iview.js + router.js + dialog.js实现</li>
                    <li class="project-experienc-content-item">使用vue.js编写公共组件，如卡片组件、全局搜索框组件、标签组件等等</li>
                    <li class="project-experience-content-item">基于iview.js实现动态表单渲染，根据数据字段类型，实现不同表单类型的渲染</li>
                    <li class="project-experience-content-item">主要功能页面的开发，包括登录、首页、主页，及大部分的列表和详情页面</li>
                    <li class="project-experience-content-item">基于axios.js封装公共请求方法，统一处理响应数据及状态</li>
                    <li class="project-experience-content-item">实现知识图谱、关联关系的可视化，实现知识规则和关系的可视化编辑功能</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="project-experience-item">
              <div class="project-experience-item-name">
                <div class="project-experience-item-label">项目名称</div>
                <div class="project-experience-item-content">企业级组件(a3ui)</div>
              </div>
              <div class="project-experience-item-desc">
                <div class="project-experience-item-label">项目描述</div>
                <div class="project-experience-item-content">
                  <ul class="project-experience-content-list">
                    <li class="project-experience-content-item">ngx-a3ui，基于Angular + ng-zorro实现的a3ui组件库，主要提供了常见的Info和List模板配置组件，还有树图、标签页、菜单树图、国家选择器、行业选择器及企业常用的一些校验方法等等</li>
                    <li class="project-experience-content-item">vue-a3ui，基于Vue2.x + element-ui实现的a3ui组件库，主要提供了常见的Info和List模板配置组件，还有分屏、向导、菜单标签、富文本、菜单树图、国家选择器、行业选择器等组件，还有业常用的一些校验方法，主题换肤等功能</li>
                  </ul>
                </div>
              </div>
              <div class="project-experience-item-tasks">
                <div class="project-experience-item-label">工作内容</div>
                <div class="project-experience-item-content">
                  <ul class="project-experience-content-list">
                    <li class="project-experience-content-item">负责ngx-a3ui常用组件和校验方法的开发，并负责ngx-a3ui组件库后期维护工作</li>
                    <li class="project-experience-content-item">在ngx-a3ui组件库维护期间，还负责AmarRQP、AmarLES等产品前端框架设计与开发</li>
                    <li class="project-experience-content-item">负责vue-a3ui整体架构设计，开发了Info和List模板组件，还有分屏、菜单标签、菜单树图等组件，设计并实现了主题换肤功能(基于CSS var，兼容IE11)</li>
                    <li class="project-experience-content-item">负责vue-a3ui后期维护工作，培养新人，并让其参与vue-a3ui的维护</li>
                    <li class="project-experience-content-item">在维护vue-a3ui期间，还负责公司主要产品的前端架构设计和实现</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="project-experience-item">
              <div class="project-experience-item-name">
                <div class="project-experience-item-label">项目名称</div>
                <div class="project-experience-item-content">微前端框架设计与开发(a3microfe)</div>
              </div>
              <div class="project-experience-item-desc">
                <div class="project-experience-item-label">项目描述</div>
                <div class="project-experience-item-content">
                  <ul class="project-experience-content-list">
                    <li class="project-experience-content-item">特定路由基座版本，基于vue2.x技术栈的微前端，通过路由的动态添加与删除功能来实现微应用的注册与删除，支持微应用之间共享页面，有点是使用简单，性能好，资源利用率高，缺点是不支持其他前端技术，如react、angular、svelte等等</li>
                    <li class="project-experience-content-item">通用路由基座版本，基于qiankun微前端框架，通过qiankun来管理子应用，包括沙箱隔离、样式隔离等等，同时在qiankun的基础上添加了微应用之间的页面共享、全局路由导航、全局状态管理等功能，支持一键打包和自动化部署</li>
                  </ul>
                </div>
              </div>
              <div class="project-experience-item-tasks">
                <div class="project-experience-item-label">工作内容</div>
                <div class="project-experience-item-content">
                  <ul class="project-experience-content-list">
                    <li class="project-experience-content-item">设计并实现特定路由基座版本的微前端框架</li>
                    <li class="project-experience-content-item">使用特定路由基座版本将公司部分产品拆分为微应用</li>
                    <li class="project-experience-content-item">基于qiankun实现更为通用的微前端框架，并使用webpack 5的Module Federation实现微应用之间的页面共享功能，在qiankun的基础上还新增了全局状态管理、路由导航和事件通信等</li>
                    <li class="project-experience-content-item">带着初中级前端将公司大部分产品拆分为qiankun微前端，同时解决微前端在构建部署上的一些问题</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="info-card">
        <div class="info-card-title">个人优势</div>
        <div class="info-card-content">
          <div class="personal-advantage">
            <div class="personal-advantage-item">
              <div class="personal-advantage-item-label">自我评价</div>
              <div class="personal-advantage-item-content">
                <ul class="personal-advantage-content-list">
                  <li class="personal-advantage-content-item">良好的团队协作和沟通能力，能够按时高质量完成计划任务</li>
                  <li class="personal-advantage-content-item">积极主动，有责任心，能够承担主要工作任务，并能协助其他同事完成开发任务</li>
                  <li class="personal-advantage-content-item">较好的自我管理和学习能力，工作之余会有计划的看书学习和编写代码</li>
                  <li class="personal-advantage-content-item">喜欢钻研技术，探索新技术及其边界，并将引进对项目或公司有价值的技术</li>
                  <li class="personal-advantage-content-item">有丰富的前端开发经验，两年前端人员培养经验，一年前端管理经验</li>
                </ul>
              </div>
            </div>
            <div class="personal-advantage-item">
              <div class="personal-advantage-item-label">个人作品</div>
              <div class="personal-advantage-item-content">
                <ul class="project-experience-content-list">
                  <li class="personal-advantage-content-item">t2vui: 一个基于vue2.x的UI组件库，目前正在开发vue3版本</li>
                  <li class="personal-advantage-content-item">md2vue-loader: 一个将Markdown文档转为vue组件的webpack loader，同时支持vue2和vue3</li>
                  <li class="personal-advantage-content-item">replace-sourcemap-url: vite插件，解决第三方包源码映射问题</li>
                  <li class="personal-advantage-content-item">mafe: 微前端框架，正在开发，已完成国际化和路由模块，还有主题模块、核心模块和脚手架待开发</li>
                  <li class="personal-advantage-content-item">other: 还有其他的一些小工具，比如主题调色工具、图片拼接工具、程序员表白网页等等</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      function download() {
        let alink = document.createElement('a');
        alink.setAttribute('href', './个人简历-张问先.docx');
        document.body.appendChild(alink);
        alink.click();
        document.body.removeChild(alink);
      }
    </script>
  </body>
</html>
